<template>
    <div class="order">
        <div class="order_title">
            <div class="order_return" @click="returnGame"></div>
        </div>
        <div class="order_name">
            <ul>
                <li class="order_nameId">吉时</li>
                <li class="order_nameInside">金童</li>
                <li class="order_nameInside">玉女</li>
                <li class="order_nameCenter">金</li>
                <li class="order_nameCenter">木</li>
                <li class="order_nameCenter">水</li>
                <li class="order_nameCenter">火</li>
                <li class="order_nameCenter">土</li>
                <li class="order_nameOuter">星座</li>
            </ul>
        </div>
        <div class="order_info">
            <ul>
                <li v-for="todo in list" :key="todo.Id">
                    <div class="order_infoId">{{ (todo.GameCode + "").slice(4) }}</div>
                    <div :class="`order_infoInside order_infoInsideNumber${todo.Details[2].OptionNumber}`"><em></em></div>
                    <div :class="`order_infoCenter order_infoCenterNumber${todo.Details[1].OptionNumber}`"><em></em></div>
                    <div class="order_infoOuter">{{ constellation(todo.Details[0].OptionNumber).name+"座" }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  props:{
    list:{
        type: Array
    },
    obj:{
        type: Object
    }
  },
  data(){
    return {
        show:false
    }
  },
  methods:{
    returnGame(){
        this.obj.status = false;
    },
    constellation(angle) {// 返回星座下注点
        let a;
        switch (angle) {
            case 1:
                a = { name: "白羊", id: 1 };
                break;
            case 2:
                a = { name: "金牛", id: 2 };
                break;
            case 3:
                a = { name: "双子", id: 3 };
                break;
            case 4:
                a = { name: "巨蟹", id: 4 };
                break;
            case 5:
                a = { name: "狮子", id: 5 };
                break;
            case 6:
                a = { name: "处女", id: 6 };
                break;
            case 7:
                a = { name: "天秤", id: 7 };
                break;
            case 8:
                a = { name: "天蝎", id: 8 };
                break;
            case 9:
                a = { name: "射手", id: 9 };
                break;
            case 10:
                a = { name: "摩羯", id: 10 };
                break;
            case 11:
                a = { name: "水瓶", id: 11 };
                break;
            case 12:
                a = { name: "双鱼", id: 12 };
                break;
        }
        return a;
    }
  }
}
</script>

<style>
.order{background: #f5bf8f; position: fixed; left: 0; top: 0; width: 100%; z-index: 100;}
.order_title{ height: 0.35rem; position: relative; background:url(../public/images/pop-bx-title.jpg) no-repeat 0.1rem 0; background-size:auto 100%;}
.order_return{width: 0.38rem; height: 0.14rem; position: absolute; left: 0.22rem; top: 0.12rem; }

.order_name ul{height: 0.22rem; border-bottom:1px solid #ac7a55; background: #663c1e;}
.order_name li{float: left; text-align: center; text-align: center; line-height: 0.22rem; font-size: 0.11rem; color: #fbd7b5;}
.order_nameId, .order_infoId{width: 0.54rem; border-right:1px solid #58311d; }
.order_nameInside{ width: 0.38rem;}
.order_nameCenter{ width: 0.27rem;}
.order_nameOuter, .order_infoOuter{ width: 0.4rem;}
.order_name li:nth-of-type(3), .order_name li:nth-of-type(8){border-right:1px solid #58311d;}

.order_info{ max-height: 72vh; overflow: auto;}
.order_info li{float: left; line-height: 0.3rem; height: 0.3rem; color: #6d3d2a; background: #f5bf8f; text-align: center; width: 100%;}
.order_info li:nth-of-type(2n-1){ background: #f3b37a;}
.order_info li>div{float: left; position: relative; height: 100%; font-size: 0.1rem;}
.order_infoId{border-right: 1px solid #d89f6c; }
.order_infoInside{ width: 0.77rem; border-right:1px solid #d89f6c;}
.order_infoCenter{ width: 1.35rem; border-right:1px solid #d89f6c;}
.order_infoInside em, .order_infoCenter em{width: 0.11rem; font-size: 0; height: 0.11rem; display: block; position: absolute; top: 0.09rem; border:1px solid #a79162; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.order_infoInside em:after, .order_infoCenter em:after{background: #9c5827; content: ""; display: block; width: 0.07rem; height: 0.07rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

.order_infoInsideNumber1 em{left: 0.11rem;}
.order_infoInsideNumber2 em{left: 0.48rem;}

.order_infoCenterNumber1 em{left: 0.05rem;}
.order_infoCenterNumber2 em{left: 0.32rem;}
.order_infoCenterNumber3 em{left: 0.6rem;}
.order_infoCenterNumber4 em{left: 0.86rem;}
.order_infoCenterNumber5 em{left: 1.12rem;}
</style>
